import React, { Component } from 'react'
import { Button, Icon, message } from 'antd'
import '../../less/index.less'
import {connect} from 'react-redux'
import { withRouter } from 'react-router-dom'
import { TwsReactMarkdownEditor, TwsReactMarkdownPreview } from 'tws-antd'
import {getUploadUrl} from '../../constant/upload-url'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../constant/lang-util'

const NOT_EXIT_ID = -1

class AssignmentContentAndAnswerBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentEditCommentId: NOT_EXIT_ID,
      supplement: ''
    }
  }
  submitSupplementary (id) {
    const { supplement } = this.state
    if (supplement.trim() === '') {
      message.warning(convertContent('内容不能为空'))
    } else {
      this.props.submitSupplementary(id, supplement)
      this.setState({
        currentEditCommentId: NOT_EXIT_ID
      })
    }
  }

  render () {
    const {reviewQuiz, userType, settings} = this.props
    const {supplement, supplementTime, id} = reviewQuiz
    const reviewQuizId = id
    const type = supplement ? '修改' : '添加'
    const { currentEditCommentId } = this.state

    return (<div>
      <div className='margin-t-3'>
        <h3><FormattedMessage id='补充说明' />&nbsp;&nbsp;
          {userType ? ''
            : <a href='javascript:'
              onClick={() => this.setState({ currentEditCommentId: reviewQuizId, supplement: supplement || '' })}>
              <span><FormattedMessage id={type} /></span><Icon type='edit' />
            </a>}
        </h3>
        {
          supplementTime
            ? <span className='submit-time-box'>
              <Icon type='clock-circle' />
              {supplementTime}
            </span>
            : (userType
                ? <div className='margin-t-2 mark-down-wrap'>
                  <TwsReactMarkdownPreview source={convertContent('暂无补充说明')} />
                </div>
                : '')
        }
        {currentEditCommentId !== reviewQuizId
          ? supplement
            ? <div className='margin-t-2 mark-down-wrap'>
              <TwsReactMarkdownPreview source={supplement} />
            </div>
            : (userType
              ? <div className='margin-t-2 mark-down-wrap'>
                <TwsReactMarkdownPreview source={convertContent('暂无补充说明')} />
              </div>
              : '')
          : <div className='margin-t-2 mark-down-wrap'>
            <div className='margin-b-1'>
              <h3><FormattedMessage id={type} /><FormattedMessage id='补充内容' /></h3>
              <TwsReactMarkdownEditor value={supplement}
                action={getUploadUrl(settings.appContextPath)}
                onChange={supplement => this.setState({ supplement })} />
              <Button className='margin-t-2' type='primary'
                onClick={this.submitSupplementary.bind(this, reviewQuizId)}><FormattedMessage id='确定' /></Button>
              <Button className='margin-t-2 margin-l-2'
                onClick={() => this.setState({ currentEditCommentId: NOT_EXIT_ID })}><FormattedMessage id='取消' /></Button>
            </div>
          </div>}
      </div>
    </div>
    )
  }
}

const mapStateToProps = state => (
  {settings: state.settings}
)

export default withRouter(connect(mapStateToProps, null)(AssignmentContentAndAnswerBox))
